<template>
    <div>
        <page-main>
            <el-table
                :data="backgroundList"
                style="width: 100%;"
            >
                <el-table-column
                    type="index"
                    width="80"
                />

                <el-table-column
                    prop="title"
                    label="标题"
                />
                <el-table-column
                    label="图片"
                >
                    <template slot-scope="scope">
                        <img :src="baseURL + scope.row.imgPath" width="100px" height="100px" alt="" title="博客轮播背景图">
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="delBackGround(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
    </div>
</template>
<script>
import { baseURL, getBgImgpList, delBgImg } from '@/api/myIndex'
export default {
    name: 'Background',
    data() {
        return {
            backgroundList: [],
            baseURL
        }
    },
    created() {
        this.getBgImgpList()
    },
    methods: {
        // 获取所有博客
        async getBgImgpList() {
            let result = await getBgImgpList()
            if (result.code === 200) {
                this.backgroundList = result.data
            }
        },

        // 删除背景图
        async delBackGround(id) {
            let result = await delBgImg(id)
            if (result.code === 200) {
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
                this.getBgImgpList()
                return
            }
            this.$message.error(result.message)
        }

    }
}
</script>
<style>
.is-justify-end {
    margin-top: 20px;
}
</style>
